
<!--
 * @Author: chunbao.cai
 * @LastEditors: chunbao.cai
-->
<template>
    <div class="map-wrapper">
        <div class='map-wrapper-content'>
            <el-form
                ref='searchForm'
                label-suffix=":"
                :model='searchFormModel'
                :inline='true'
                label-position='right'
                label-width='130px'
                class='search'
                :rules="rules"
                size="small"
            >
                <el-form-item class='condition' label="账号名称">
                    <el-input
                        v-model='searchFormModel.username'
                        placeholder="请输入账号"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-form>
            <div class='action-wrap'>
                <el-button size="small" icon="el-icon-refresh-right" @click="resetForm('searchForm')">重置</el-button>
                <el-button size="small" type="primary" icon="el-icon-search" @click='search'>查询</el-button>
            </div>
        </div>
        <div class='pub-action-box'>
            <el-button size="small" type="primary" icon="el-icon-circle-plus">添加账号</el-button>
        </div>
        <div class='main-table-box'>
            <el-table class='table' :data='list' v-loading="isLoading">
                <template slot="empty">
                    <span>{{ emptyText }}</span>
                </template>
                <el-table-column label="序号" type="index" align='center'></el-table-column>
                <el-table-column label="账号" prop='username' align='center'>
                    <template slot-scope="scope">
                        <div>{{scope.row.username}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="密码" prop='password' align='center'></el-table-column>
                <el-table-column label="操作" align='center' fixed='right'>
                    <template>
                        <span class='link'>删除</span>
                        <span class='link'>操作记录</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class='pager-wrap'>
                <el-pagination
                    layout="prev, pager, next, total"
                    :hide-on-single-page='false'
                    :total='totalElements'
                    :page-size='pageSize'
                    :current-page='pageNum + 1'
                    @current-change='pagerChanged'
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { findAllUserinfo } from "../../api/account.js"

export default {
    name: 'Account',
    components: {
    },
    props: {
    },
    data() {
        return {
            list: [],               // 列表数据
            isLoading: true,
            searchFormModel: {      // 表单筛选数据
                username: ''
            },
            rules: {},              // 表单校验规则
            pageNum: 0,             // 列表当前页数
            pageSize: 20,           // 分页展示数量
            totalElements: 0        // 数据总数
        };
    },
    computed: {
        emptyText() {
            return !this.isLoading && this.list.length === 0 ? '暂无数据' : '';
        }
    },
    async created() {
        this.fetchList();
    },
    methods: {
        search() {
            this.pageNum = 0;
            this.fetchList();
        },
        async fetchList() {
            try {
                this.isLoading = true;
                let params = this.searchFormModel;
                const res = await findAllUserinfo(params);

                console.log(res)
                
                this.list = res.data;
                
                this.isLoading = false;
            } catch (error) {
                this.isLoading = false;
                throw new Error(error);
            }
        },
        // 分页的回调
        pagerChanged(pageIndex) {
            this.pageNum = pageIndex - 1;
            this.fetchList();
        },
        // 重置表单数据
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
};
</script>

<style lang="scss" scoped>
.account-container {

}
</style>
